<template>
  <div class="login">
    <TopNav />
    <div class="login_wrapper">
      <div class="login-title">
        <div class="logo">
          <img src="../assets/images/logo.jpg" alt="">
        </div>
        <div class="big-title">欢迎登录Nene Coffee</div>
      </div>
      <!-- 表单 -->
      <div class="form">
        <van-field label="手机号" v-model="userLogin.phone" placeholder="输入手机号" />
        <van-field label="密码" v-model="userLogin.password" :type="isText ? 'text':'password'" placeholder="输入密码" @click-right-icon="taggleEye" :right-icon="isText ? 'eye-o' : 'closed-eye'"/>
        <div class="forgot">忘记密码?</div>
        <div style="margin: 53px 0 0">
          <van-button round block type="info" @click="login">登录</van-button>
        </div>
        <div style="margin-top: 20px">
          <van-button @click="showPopup" type="default" round block>注册</van-button>
        </div>
      </div>
      <!-- 注册弹出层 -->
      <van-popup v-model="isPopup" position="bottom" style="padding-bottom: 50px;">
        <div class="form">
          <van-field label="手机号" v-model="userRegister.phone" placeholder="输入手机号" />
          <van-field label="密码" v-model="userRegister.password" :type="isText ? 'text':'password'" @click-right-icon="taggleEye" :right-icon="isText ? 'eye-o' : 'closed-eye'" placeholder="输入密码" />
          <van-field label="昵称" v-model="userRegister.nickName" placeholder="输入昵称" />
          <div style="margin: 20px">
            <van-button @click="register" type="default" color="#1989fa" round block>注册</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import "../assets/less/login.less";
import TopNav from "../components/TopNav";
import {utils} from '../assets/js/utils';
export default {
  name: "Login",
  components: {
    TopNav,
  },
  data() {
    return {
      isPopup: false,
			isText: false,
			userLogin: {
        phone: '',
			  password: '',
      },
			userRegister: {
        phone: '',
        password: '',
        nickName: ''
      }
    };
  },
  methods: {
    showPopup() {
      this.isPopup = true;
		},
		taggleEye() {
			this.isText = !this.isText;
    },

    // 注册
    register() {
			// /^1[3-9]\d{9}$/
			// /^[A-Za-z]\w{5,15}$/
			// /^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/
			let obj = {
				phone: {
					value: this.userRegister.phone,
					reg: /^1[3-9]\d{9}$/,
					errorMsg: '手机号格式不正确'
				},
				password: {
					value: this.userRegister.password,
					reg: /^[A-Za-z]\w{5,15}$/,
					errorMsg: '密码为字母开头,支持英文数字_组合'
				},
				nickName: {
					value: this.userRegister.nickName,
					reg: /^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/,
					errorMsg: '昵称为汉子字母数字组合'
				}
			}

			if (!utils.vaildForm(obj)) {
				return;
      }
      
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })

      this.axios({
        method: 'post',
        url: this.baseURL + '/register',
        data: {
          appkey: this.appkey,
          phone: this.userRegister.phone,
          password: this.userRegister.password,
          nickName: this.userRegister.nickName
        }
      }).then((response)=> {
        // console.log(response);
        this.$toast.clear();
        if (response.data.code == 100) {
          this.$toast({
            message: response.data.msg,
            forbidClick: true,
            duration: 1000
          })
          this.isPopup = false;
          for (let key in this.userRegister) {
            this.userRegister[key] = '';
          }
        } else {
          this.$toast({
            message: response.date.msg,
            forbidClick: true,
            duration: 1000
          })
        }
      }).catch((err)=>{
        this.$toast.clear();
        console.error(err);
      })
    },

    // 登陆
    login() {
      // /^1[3-9]\d{9}$/
      // /^[A-Za-z]\w{5,15}$/
      // /^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/
      let obj = {
        phone: {
          value: this.userLogin.phone,
          reg: /^1[3-9]\d{9}$/,
          errorMsg: '手机号格式不正确'
        },
        password: {
          value: this.userLogin.password,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: '密码为字母开头,支持英文数字_组合'
        },
      }

      if (!utils.vaildForm(obj)) {
        return;
      }
      
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })

      this.axios({
        method: 'post',
        url: this.baseURL + '/login',
        data: {
          appkey: this.appkey,
          phone: this.userLogin.phone,
          password: this.userLogin.password,
        }
      }).then((response)=> {
        // console.log(response);
        this.$toast.clear();
        if (response.data.code == 200) {
          this.$toast({
            message: response.data.msg,
            forbidClick: true,
            duration: 1000
          });
          //登录成功
          //存储token, 用于下次访问有关于用户信息界面的登录标记
          this.$cookies.set('tokenString', response.data.token);
          // 跳转到home
          this.$router.push({path: '/'});
        } else {
          this.$toast({
            message: response.date.msg,
            forbidClick: true,
            duration: 1000
          })
        }
      }).catch((err)=>{
        this.$toast.clear();
        console.error(err);
      })
    }
  },
};
</script>
